<template>
  <a-form-model
    ref="createBuilder"
    :model="form"
    :rules="rules"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
    :hideRequiredMark="true"
  >
    <div class="flex justify-end" v-if="approve != 2">
      <a-button type="primary" v-if="!!form.id && readOnly" @click="readOnly = false" v-action:update>
        修改
      </a-button>
      <a-button v-if="!!form.id && !readOnly" type="primary" @click="updata" v-action:update>
        保存
      </a-button>
    </div>
    <a-form-model-item label="建筑公司名称：" prop="name">
      <a-input v-model="form.name" class="width" :disabled="readOnly && form.id ? true : false" />
    </a-form-model-item>

    <a-form-model-item label="联络人：" prop="contactPerson">
      <a-input v-model="form.contactPerson" class="width" :disabled="readOnly && form.id ? true : false">
        <a-select slot="addonAfter" v-model="form.contactPersonSex" :disabled="readOnly && form.id ? true : false">
          <a-select-option :value="item.value" v-for="item in sex" :key="item.text">
            {{ item.text }}
          </a-select-option>
        </a-select>
      </a-input>
    </a-form-model-item>

    <a-form-model-item ref="email" label="电子邮件：" prop="email">
      <a-input v-model="form.email" class="width" :disabled="readOnly && form.id ? true : false" />
    </a-form-model-item>

    <a-form-model-item label="电话号码：" prop="phone">
      <a-input v-model="form.phone" ref="phone" class="width" :disabled="readOnly && form.id ? true : false">
        <a-select slot="addonBefore" v-model="form.areaCode" :disabled="readOnly && form.id ? true : false">
          <a-select-option :value="item.value" v-for="item in area" :key="item.text">
            {{ item.text }}
          </a-select-option>
        </a-select>
      </a-input>
    </a-form-model-item>

    <a-form-model-item ref="architectureUndergo" label="过往建筑经验：" prop="architectureUndergo">
      <a-textarea
        v-model="form.architectureUndergo"
        class="text"
        :rows="4"
        :disabled="readOnly && form.id ? true : false"
      />
    </a-form-model-item>

    <a-button v-if="!form.id ? true : false" class="space" type="primary" @click="onSubmit">
      下一步
    </a-button>
  </a-form-model>
</template>

<script>
import { sex, area } from '@/dict'
import { createBuilder, getBuilder, updateBuilderById, createHistory, getDetailList } from '@/api/common'
import { emailRule, commonRule, phoneRule } from '@/utils/rules'
export default {
  name: 'Builder',
  data() {
    return {
      labelCol: { span: 3 },
      wrapperCol: { span: 14 },
      sex,
      area,
      page: '4',
      readOnly: true,
      // Archive: 0,
      form: {
        name: '',
        contactPerson: '',
        contactPersonSex: 1,
        email: '',
        phone: '',
        areaCode: '+64',
        architectureUndergo: ''
      },
      rules: {
        name: commonRule,
        contactPerson: commonRule,
        email: emailRule,
        phone: phoneRule,
        architectureUndergo: commonRule
      }
    }
  },
  watch: {
    form: {
      handler(v) {
        let id = this.$route.query.id
        this.$store.commit('form/SAVE_DATA', {
          key: 'business/builder-' + id,
          value: this.form
        })
      },
      deep: true
    }
  },
  mounted() {
    let id = this.$route.query.id
    if (id) {
      this.getData()
    }
    if (!this.form.id) {
      const formStore = this.$store.state.form?.['business/builder-' + id]
      formStore && Object.assign(this.form, formStore)
    }
  },
  computed: {
    approve() {
      return Number(this.$route.query.approve)
    }
  },
  methods: {
    async getData() {
      let id = this.$route.query.id
      const res = await getBuilder(id)
      let data = res.result.data
      if (data?.[0]) {
        let form = Object.assign(data?.[0] || {})
        // form.applyDate = String(form.applyDate)
        // form.landDate = String(form.landDate)
        Object.assign(this.form, form)
      }
      // const r = await getDetailList(id)
      // this.Archive = r.result.data.Archive
    },
    onSubmit() {
      let projectId = this.$route.query.id
      this.$refs.createBuilder.validate(valid => {
        if (valid) {
          let form = Object.assign({ projectId }, this.form)
          createBuilder(form)
          this.$store.commit('form/CLEAR', 'business/builder-' + projectId)
          this.$emit('submit')
        }
      })
    },
    updata() {
      let projectId = this.$route.query.id
      this.$refs.createBuilder.validate(valid => {
        if (valid) {
          updateBuilderById(this.form.id, this.form)
          const history = {
            recordType: 0,
            tableId: Number(projectId)
          }
          createHistory(history)
          this.$store.commit('form/CLEAR', 'business/builder-' + projectId)
        }
      })
      this.readOnly = true
    }
  }
}
</script>
<style>
.width {
  width: 50%;
}
.text {
  resize: unset;
  vertical-align: top;
}
.space {
  margin-left: 45%;
}
</style>
